<template>
  <borderContainer bg-color="#fff6c6" bd-color="#f6cd88" class="group-tips">
    <avatarGroup class="group-tips-avatar" :avatar="join_avatar" />
    <view class="group-tips-content">
      已有<text>{{ successGroupNum }}</text
      >个团队成团
    </view>
    <view class="group-tips-button" @tap="handleLookGank">
      查看排行<image
        :lazy-load="true"
        src="@/assets/icon/group-tips-right.png"
      />
    </view>
  </borderContainer>
</template>
<script>
import borderContainer from "@/components/border-box/index";
import avatarGroup from "@/components/avatar-group";
import { formatNumber } from "@/libs/util";
const FORMAT_MAX_NUM = 10000; // 需要格式化的最大值
export default {
  components: {
    avatarGroup,
    borderContainer
  },
  props: {
    /**活跃团信息 */
    activity_data: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    join_avatar() {
      return this.activity_data.join_avatar || [];
    },
    /**成团数格式化 */
    successGroupNum() {
      return formatNumber(this.activity_data.success_num);
    }
  },
  methods: {
    handleLookGank() {
      this.$emit("to-rank");
    }
  }
};
</script>

<style lang="scss">
@import "../scss/group-common.scss";
.group-tips {
  position: absolute;
  left: 28px;
  bottom: -14px;
  width: 694px;
  height: 114px;
  padding: 0 36px;
  .content-slot {
    display: flex;
    align-items: center;
    height: 100%;
  }
  &-avatar {
    margin-right: 16px;
    max-width: 240px;
  }
  &-content {
    flex: 1;
    @include base-text(34px, 24px, #303133, 400);
    @extend %base-one-hide;
    margin-right: 28px;
    text {
      color: #ff8000;
    }
  }
  &-button {
    display: flex;
    align-items: center;
    @include base-text(34px, 24px, #303133, 400);
    image {
      width: 9px;
      height: 16px;
      margin-left: 8px;
    }
  }
}
</style>
